<template>
  <div class="admin"> 
      <el-card v-loading="pager.loading" class="!border-none" shadow="never">
        
          <div>
              <el-table :data="pager.lists" size="large">
                  <el-table-column label="购买名称" prop="orderDesc" min-width="100" />
                  <el-table-column label="购买金额" min-width="100" >
                    <template #default="{ row }">
                      {{ row.actualAmount || '—' }}
                    </template>
                  </el-table-column>
                  <el-table-column label="订单号" min-width="150">
                      <template #default="{ row }">
                          {{ row.orderNo || '—' }}
                      </template>
                  </el-table-column>
                  <el-table-column label="支付订单号" min-width="150">
                      <template #default="{ row }">
                          {{ row.platformTransactionId || '—' }}
                      </template>
                  </el-table-column>

                  <el-table-column label="虚拟币数量/VIP时间" min-width="150">
                      <template #default="{ row }">
                          {{ row.buyNum}}{{ row.unit }}
                      </template>
                  </el-table-column>
                  <el-table-column label="支付状态" min-width="100" >
                    <template #default="{ row }">
                      {{ row.paymentStatus === 0 ? '待支付' : row.paymentStatus === 1 ? '支付成功' : row.paymentStatus === 2 ? '支付失败' : row.paymentStatus === 3 ? '已关闭' : '已退款' }}
                    </template>
                  </el-table-column>
                  <el-table-column label="支付时间" min-width="100" >
                    <template #default="{ row }">
                        {{ row.paymentTime || '—' }}
                    </template>
                  </el-table-column>
                  <el-table-column label="支付方式" min-width="100" >
                    <template #default="{ row }">
                      {{ row.paymentChannel === 2 ? '微信支付' : '支付宝支付' }}
                    </template>
                  </el-table-column>
                  
              </el-table>
              <div class="flex justify-end mt-4">
                  <pagination v-model="pager" @change="getLists" />
              </div>
          </div> 
      </el-card>

    
            
  </div>
</template>

<script setup name="admin">
import {ref} from 'vue'
import { paymentRecords } from '@/apis/finance' 
import { usePaging } from '@/hooks/usePaging'
import feedback from '@/utils/feedback'


const queryParams = reactive({
    
})

 
const { pager, getLists } = usePaging({
  fetchFun: paymentRecords,
  params: queryParams

})

 
onMounted(() => {
  getLists()
})
</script>


<style scoped>
.el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
  outline: none;
}

.tab {
  display: flex;
  margin: 16px 0;
  border-bottom: 1px solid #e4e7ed;
}

.tab-item {
  padding: 12px 24px;
  cursor: pointer;
  color: #606266;
  border-bottom: 2px solid transparent;
  transition: all 0.3s;
  font-weight: 500;
}

.tab-item:hover {
  color: var(--el-color-primary);
}

.tab-item.active {
  color: var(--el-color-primary);
  border-bottom-color: var(--el-color-primary);
}
</style>
